import React from 'react'
import { createBrowserHistory } from 'history' //非组件环境做路由跳转
import { Router } from 'react-router-dom'

export const history = createBrowserHistory()

export const HistoryRouter = ({ history, children }) => {
  const [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  })

  React.useLayoutEffect(() => {
    history.listen(setState)
  }, [history])

  return <Router children={children} navigator={history} {...state} />
}
